import React from "react";
import "./index.less";
import { useState } from "react";
export default function Item(props) {
  const { id, done, thing, index, changeSingleType, deleteSingle } = props;
  //定义一个数据 鼠标移入的li的下标
  // 方法一  const [mouseIndex, setMouseIndex] = useState(-1);
  //当鼠标移入当前li的时候,把当前li的下标设置给mouseIndex,当鼠标移出的时候把mouseIndex设置为-1

  //
  // 方法二
  const [isMouseEnter, setIsMouseEnter] = useState(false);
  return (
    //方法一
    //用数据控制类名
    // <li
    //   className={index === mouseIndex ? "active" : ""}
    //   onMouseEnter={() => {
    //     setMouseIndex(index);
    //   }}
    //   onMouseLeave={() => {
    //     setMouseIndex(-1);
    //   }}
    // >
    //   <label>
    //     <input type="checkbox" checked={done} onChange={() => {}} />
    //     <span>{thing}</span>
    //   </label>
    //   <button className="btn btn-danger">删除</button>
    // </li>

    //
    //
    //
    //
    //方法二
    // 定义一个数据保存 当前li是否被鼠标移入
    <li
      className={isMouseEnter ? "active" : ""}
      onMouseEnter={() => {
        setIsMouseEnter(true);
      }}
      onMouseLeave={() => {
        setIsMouseEnter(false);
      }}
    >
      <label>
        <input
          type="checkbox"
          checked={done}
          onChange={(e) => {
            changeSingleType(id, e.target.checked);
          }}
        />
        <span>{thing}</span>
      </label>
      <button
        className="btn btn-danger"
        onClick={() => {
          deleteSingle(index);
        }}
      >
        删除
      </button>
    </li>
  );
}
